<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()" right-text="预览"
				@clickRight="$native.toStore(info.id)"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="store-header">
			<view class="store-info flex_center">
				<view class="left flex_center">
					<view class="avatar">
						<image :src="info.avatar" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="flex_center">
							<text class="hidden" style="max-width: 300rpx;">{{ info.store_name }}</text>
							<view class="certification-image" @click="$util.previewImage([info.business_license_img],0)"
								v-if="info.business_license_img">
								<image :src="$util.prefix('newstore/certification_icon.png')" mode="aspectFill"></image>
							</view>
						</view>
						<view class="auth-status flex_center" v-if="info.company_status != 2 && info.auth == 1"
							@click="$native.toAuth()">
							<u-icon name="info-circle-fill" color="#666666" size="28rpx"></u-icon>
							<text>您当前未认证</text>
							<i>去认证</i>
							<u-icon name="arrow-right" color="#FD2A53" size="20rpx"></u-icon>
						</view>
					</view>
					
				</view>

				<view class="right" @click="$native.toScanCode()">
					<image :src="$util.prefix('newstore/scan_code.png')" mode="aspectFill"></image>
				</view>
				<view style="width: 40rpx;">

				</view>
				<view class="right" @click="$util.toUrl('/pages/auth/storeAuth?from_web=1')">
					<image :src="$util.prefix('newstore/store_info_edit_icon.png')" mode="aspectFill"></image>
				</view>
			</view>

			<view class="store-sign hidden_2">
				{{ info.signature }}
			</view>

			<scroll-view scroll-x="true">
				<view class="store-tags flex_center" v-if="info.tags">
					<view class="item flex_r_around" :id="`item${index+1}`" v-for="(item,index) in info.tags"
						:key="index">
						<text>{{ item }}</text>
					</view>
				</view>
			</scroll-view>

		</view>

		<view class="content">
			<view class="income flex_center" v-if="info.auth == 1">
				<view class="left flex_r_between">
					<view class="item flex_c">
						<text>{{ info.today_price || 0 }}</text>
						<view>日销售额(元)</view>
					</view>

					<view class="item flex_c">
						<text>{{ info.today_num || 0 }}</text>
						<view>今日订单</view>
					</view>

					<view class="item flex_c">
						<text>{{ info.month_price || 0 }}</text>
						<view>月销售额(元)</view>
					</view>
				</view>

				<view class="line">

				</view>

				<view class="right flex_c" @click="$util.toUrl('/pages/store/income/never')">
					<text>{{ info.withdraw_price }}</text>
					<button>去提现</button>
				</view>
			</view>

			<view class="order flex_r_between">
				<view class="item flex_c" @click="toOrder(2)">
					<image :src="$util.prefix('newstore/order_icon1.png')" mode="aspectFill"></image>
					<text>待接单({{ info.pending_num || 0 }})</text>
				</view>

				<view class="item flex_c" @click="toOrder('3,4')">
					<image :src="$util.prefix('newstore/order_icon2.png')" mode="aspectFill"></image>
					<text>待完成({{ info.no_finish_num || 0 }})</text>
				</view>

				<view class="item flex_c" @click="toOrder(11)">
					<image :src="$util.prefix('newstore/order_icon3.png')" mode="aspectFill"></image>
					<text>违规项({{ info.refund_num || 0 }})</text>
				</view>
			</view>

			<!-- info.auth == 1 为商家 -->
			<view class="grid" v-if="info.auth == 1 && info.company_status == 2">
				<u-grid :border="false" :col="3">
					<u-grid-item v-for="(item,index) in iconList" :key="index" @click="toUrl(item)">
						<view class="item flex_c">
							<image :src="$util.prefix(item.image)" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<u-popup :show="show_auth" mode="center" bgColor="transparent">
			<view class="modal flex_c">
				<!-- <view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view> -->
				<view class="title">提示</view>
				<view class="text">请先完成{{
					// 1= 不需要认证，2=实名认证，3=资格认证，4=实名+资格认证
					active_status == 2 ? '实名认证'
					: active_status == 3 ? '资格认证'
					: active_status == 4 ? '实名和资格认证'
					: '认证'
				}}</view>
				<view class="modal_btn flex_r_around">
					<view class="item submit flex_r_around" @click="toAuth">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconList: [{
						image: 'newstore/newstore_grid_icon1.png',
						text: '编辑资料',
						url: '/pages/auth/storeAuth?from_web=1',
					},
					{
						image: 'newstore/newstore_grid_icon2.png',
						text: '团队管理',
						url: '/pages/newstore/team',
					},
					{
						image: 'newstore/newstore_grid_icon3.png',
						text: '订单管理',
						url: '/pages/newstore/order',
					},
					{
						image: 'newstore/newstore_grid_icon4.png',
						text: '商品管理',
						url: '/pages/newstore/product',
					},
					{
						image: 'newstore/newstore_grid_icon5.png',
						text: '分类管理',
						url: '/pages/newstore/classification',
					},
					{
						image: 'newstore/newstore_grid_icon6.png',
						text: '圈子管理',
						url: '/pages/newstore/circle',
					},
					{
						image: 'newstore/newstore_grid_icon7.png',
						text: '店铺设置',
						url: '/pages/newstore/manage',
					}
				],

				info: {},

				// 1= 不需要认证，2=实名认证，3=资格认证，4=实名+资格认证
				active_status: 1,
				show_auth: false,

			}
		},
		methods: {
			toUrl(item) {
				if (item.text == '订单管理') {
					this.$util.toUrl(item.url + `?auth=${this.info.auth}`);
				} else {
					this.$util.toUrl(item.url);
				}
			},

			getStoreInfo() {
				this.$get('/store/getStoreInfoV2').then(res => {
					this.info = res.data;
					if (this.info.tags) {
						this.info.tags = this.info.tags.split(',');
					} else {
						this.info.tags = [];
					}
					uni.setStorageSync('store', res.data);

					if (this.info.auth != 1) {
						this.getUserAuthStatus();
					}
				})
			},

			toOrder(status) {
				if (this.active_status == 1) {
					this.$util.toUrl(`/pages/newstore/order?status=${status}&auth=${this.info.auth}`)
				} else {
					this.show_auth = true;
				}
			},

			getUserAuthStatus() {
				// 1= 不需要认证，2=实名认证，3=资格认证，4=实名+资格认证
				this.$get('/user/getUserAuthStatus').then(res => {
					this.active_status = res.data.active_status;
				})
			},

			toAuth() {
				this.show_auth = false;
				this.$native.toAuth();
			},
			
			storeAuthStatus(){
				this.getStoreInfo();
			},

		},

		onLoad() {
			window.storeAuthStatus = this.storeAuthStatus();
			this.getStoreInfo();
		}
	}
</script>

<style lang="less" scoped>
	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;

		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}

	.store-header {
		overflow: hidden;
		background: #FFF;
		padding: 24rpx 32rpx 32rpx;

		.store-info {
			overflow: hidden;

			.left {
				flex: 1;
				overflow: hidden;

				.avatar {
					width: 112rpx;
					height: 112rpx;
					background: #D8D8D8;
					border-radius: 56rpx;
					overflow: hidden;

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}

				.name {
					margin-left: 24rpx;
					text {
						font-weight: 600;
						font-size: 40rpx;
						color: #131313;
						line-height: 56rpx;
						margin: 0 8rpx 0 0;
					}
					.certification-image {
						width: 40rpx;
						height: 40rpx;
					
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					
					.auth-status {
						overflow: hidden;
						text {
							font-size: 24rpx;
							color: #000000;
							line-height: 34rpx;
							margin: 0 8rpx 0 4rpx;
							font-weight: 400;
						}
					
						i {
							font-size: 24rpx;
							color: #FD2A53;
							line-height: 32rpx;
							font-style: normal;
							margin-right: 4rpx;
							font-weight: 400;
						}
					}
				}
			}

			.right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.store-sign {
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
			margin: 24rpx 0;
		}

		scroll-view {
			width: 100%;
		}

		.store-tags {
			flex-wrap: nowrap;

			.item {
				flex-shrink: 0;
				border-radius: 8rpx;
				padding: 4rpx 24rpx;
				border: 2rpx solid #FF6D6D;
				margin-right: 12rpx;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #FF6D6D;
				}
			}

			#item1 {
				border: 2rpx solid #FF6D6D;

				text {
					color: #FF6D6D;
				}
			}

			#item2 {
				border: 2rpx solid #459BFD;

				text {
					color: #459BFD;
				}
			}

			#item3 {
				border: 2rpx solid #DDA103;

				text {
					color: #DDA103;
				}
			}

			#item4 {
				border: 2rpx solid #AA78FF;

				text {
					color: #AA78FF;
				}
			}
		}

	}

	

	.content {
		padding: 24rpx;
	}

	.income {
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;

		.line {
			width: 2rpx;
			height: 64rpx;
			background: #F1F1F1;
			margin: 0 32rpx;
		}

		.left {
			flex: 1;

			.item {
				text {
					font-weight: 600;
					font-size: 32rpx;
					color: #131313;
					line-height: 50rpx;
				}

				view {
					font-size: 24rpx;
					color: #666666;
					margin-top: 16rpx;
				}
			}
		}

		.right {
			text {
				font-weight: 600;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}

			button {
				width: 132rpx;
				height: 44rpx;
				background: #FFEAEE;
				border-radius: 24rpx;
				border: 2rpx solid rgba(253, 42, 83, 0.2);
				font-size: 24rpx;
				color: #FD2A53;
				line-height: 44rpx;
				margin-top: 10rpx;
				padding: 0;
			}

			button::after {
				border: 0;
			}
		}
	}

	.order {
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 56rpx;
		margin: 20rpx 0;

		.item {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}
	}

	.grid {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 60rpx 0;

		.item {
			margin-bottom: 50rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 12rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 68rpx 48rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}
</style>